<!--
*@Author: QWP
*@Description: 配置的流程展示
*@Date: 2024-08-15 17:48:29
-->
<template>
  <a-layout class="f-w-100 f-h-100">
    <template v-if="svgImg">
      <a-layout-content v-html="svgImg"></a-layout-content>
    </template>
    <template v-else>
      <a-empty description="暂无流程图"/>
    </template>
  </a-layout>
</template>

<script lang='ts' setup>
defineOptions({ name: 'u-act-flow' })
import { ref, reactive, computed, onMounted, watch, nextTick, useAttrs } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import * as auditApi from '@/service/audit'

const props = defineProps<{
  processInstanceId?: string,
  porcessKey?: string,
  show?: boolean
}>()

const attrs = useAttrs()

const svgImg = ref('')

// 获取流程记录
const getTrack = () => {
  auditApi.getTrack({
    processInstanceId: props.processInstanceId,
    porcessKey: ''
  })
  .then(res => {
    const { btoa } = window
    svgImg.value =  res
  })
}

onMounted(() => {
  nextTick(() => {
    getTrack()
  })
})

watch(() => props.show, (nval, oval) => {
  if(nval == true && props.processInstanceId) {
    getTrack()
  }
}, { immediate: true, deep: true })
</script>

<style lang='scss' scoped>
</style>
